<template>
  <div class="bg-[#fdc14b] flex  justify-center  items-center">
    <div class="w-full   flex justify-between  items-center">
      <div class="w-1/3  flex justify-center items-center ">
        <img src="https://i.postimg.cc/T2cn3H1V/11-3x.png" alt="" class="2xl:wl-[10%]">
        <div class="flex flex-col justify-center items-center my-5 h-[5.6rem] text-white 2xl:ml-[10%] ">
          <h1 class="text-base 2xl:text-3xl xl:text-2xl lg:text-xl md:text-lg sm:text-base">
            来探索美食
          </h1>
          <p class="text-xs 2xl:text-2xl xl:text-xl lg:text-lg md:text-base sm:text-xs mt-[1.4rem]">
            品尝甜蜜，探索新意
          </p>
        </div>
      </div>
      <div
        class="w-1/4 h-[6.25rem] border border-black rounded-full flex justify-center  items-center  bg-white">
        <input
          type="text"
          placeholder="搜索菜品..."
          class="w-2/3 focus:outline-none "
        />
        <div><img src="https://i.postimg.cc/k5zP8c5w/2.png" alt="" class="w-[50px]"></div>
      </div>
      <div class="w-1/3  flex justify-center  items-center">
        <div class=" bg-white text-center  m-auto w-2/5 rounded-full">
          <div class="p-3">
            <span
              class="font-bold cursor-pointer text-xs 2xl:text-2xl xl:text-xl lg:text-lg md:text-base sm:text-xs"
              >登录</span
            >
            <span class="mx-1">|</span>
            <span
              class="font-bold cursor-pointer text-xs 2xl:text-2xl xl:text-xl lg:text-lg md:text-base sm:text-xs "
              >注册</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
